/* pages/index/index.wxss */
.banners{
    width: 90%;
    height: 225rpx;
    margin: 10rpx auto;
   
    .banners-item{
        border-radius: 20rpx;
        position: relative;
    }
    image{
        width: 100%;
        border-radius: 20rpx;
    }
    .typeTitle{
        position: absolute;
        padding: 6rpx;
        right: 0;
        bottom: 0;
        color: #fff;
        font-size: 22rpx;
        border-top-left-radius: 12rpx;
        
    }
  }
  .bannersContainer{
      position: relative;
  }
  .dots{
      position: absolute;
      display: flex;
      bottom: 10rpx;
      left: 50%;
      transform: translateX(-50%);
      align-items: center;
      view{
        width: 18rpx;
        height: 6rpx;
        border-radius: 6rpx;
        background: rgb(194, 187, 187);
        margin: 0 5rpx;
      }
      .active{
        background-color: #fff;
      }
  }
  
  /* 五个图标 */
  .navContainer{
      display: flex;
      
    .navItem{
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 20%;
        .iconfont{
            height: 100rpx;
            width: 100rpx;
            border-radius: 50%;
            text-align: center;
            line-height: 100rpx;
            background: rgb(240,19,19);
            color: aliceblue;
            font-size: 50rpx;
            margin:20rpx 0;
        }
        text{
            font-size: 26rpx;
        }
    }
  }

/*推荐歌单*/
.recommendContainer{
    padding: 20rpx;
   
    .recommend-content{
        height: 300rpx;
        display: flex;
        margin-top: 20rpx;
        .recomment-item{
            width: 200rpx;
            margin-right: 20rpx;
            image{
                width: 200rpx;
                height: 200rpx;
                border-radius: 15rpx;
            }
            text{
                font-size: 26rpx;
                // white-space: nowrap;
                // overflow: hidden;
                // text-overflow: ellipsis;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
            }
        }
    }
}

.topList{
    padding: 20rpx;
}
.topListSwiper{
    height: 400rpx;
}
.swiperItem{
    width: 96%;
    background: #fbfbfb;
    .title{
        font-size: 30rpx;
        line-height: 80rpx;
    }
    .musicItem{
        display: flex;
        margin-bottom: 20rpx;
        image{
            width: 100rpx;
            height: 100rpx;
            border-radius: 6rpx;
        }
        .count{
            width: 100rpx;
            height: 100rpx;
            text-align: center;
            line-height: 100rpx;
        }
        .musicName{
            line-height: 100rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 400rpx;
            white-space: nowrap;
        }
    }
}